import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

import { defalutImg } from '../../../comm';
import { CommonService } from '../../../services-common/common.service';
import { ConfigGoodsStoreService } from './config-goods-store.service';

@Component({
  selector: 'app-config-goods-store',
  templateUrl: './config-goods-store.component.html',
  styleUrls: ['./config-goods-store.component.scss']
})
export class ConfigGoodsStoreComponent implements OnInit {

  fallback: string = defalutImg;
  searchOptions = [
    { type: 1, labelText: '商品', valueKey: 'name', value: '', placeholder: '69码/名称/品牌/备注' }
  ];
  searchParams: any = {};

  tableParams: any = {
    loading: false,
    tableData: [],
    page: 1,
    pageSize: 20,
    total: 0
  };

  isVisible = false;
  modalItem: any = null;
  submitLoading = false;
  validateForm!: FormGroup;

  constructor(
    private msg: NzMessageService,
    private fb: FormBuilder,
    private commonService: CommonService,
    private services: ConfigGoodsStoreService
  ) { }

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      code: ['', [Validators.required]], // 69码
      name: ['', [Validators.required]], // 商品名称
      state: ['', [Validators.required]], // 状态
      brandName: [''], // 品牌
      img: [''], // 把图片
      remark: [''] // 备注
    });
  }

  async loadTable() {
    const params = {
      ...this.searchParams,
      page: this.tableParams.page,
      pageSize: this.tableParams.pageSize
    }
    this.tableParams.loading = true;
    const {code, data}: any = await this.services.queryGoodsStoreData(params);
    this.tableParams.loading = false;

    if (code === 0) {
      this.tableParams.tableData = data.records || [];
      this.tableParams.total = data.total || 0;
    }
  }

  queryResetData(params: any) {
    this.searchParams = params;
    this.tableParams.page = 1;
    this.loadTable();
  }

  // PageIndex Change
  onPageIndexChange(index: number) {
    this.tableParams.page = index;
    this.loadTable();
  }
  // PageSize Change
  onPageSizeChange(sizeNum: number) {
    this.tableParams.page = 1;
    this.tableParams.pageSize = sizeNum;
    this.loadTable();
  }

  /**
   * ----------------------------------------------------------------
   * 新增 | 编辑 Modal
   * ----------------------------------------------------------------
   */
  showEditGoodsModal(data?: any) {
    this.validateForm.reset();
    this.modalItem = null;
    if (data) {
      this.modalItem = data;
      this.validateForm.patchValue({
        code: data.code,
        name: data.name,
        state: data.state,
        brandName: data.brandName || '',
        img: data.img || '',
        remark: data.remark || ''
      });
    }
    this.isVisible = true;
  }

  async submitForm() {
    if (this.validateForm.valid) {
      const params = {
        ...this.validateForm.value
      }
      if (this.modalItem) {
        params.id = this.modalItem.id
      }
      for (let key in params) {
        params[key] = this.commonService.isEmpty(params[key]) ? '' : params[key];
      }
      this.submitLoading = true;
      const {code, data}: any = await this.services.eidtGoodsStoreData(params);
      this.submitLoading = false;

      if (code === 0) {
        this.msg.success('操作成功');
        this.isVisible = false;
        this.loadTable();
      }
    } else {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          control.markAsDirty();
          control.updateValueAndValidity({ onlySelf: true });
        }
      });
    }
  }
}
